<template>
  <Row>
    <Col :span="3">
        <hierTree :data="current.filters" v-bind="treeAttrs" :ref="'tree'"
        @select="select"
        @add="add"
        @remove="remove"
        @menu="menu"></hierTree>
    </Col>
    <Col v-if="item" :span="21">
        <cfg-form :ref="'form'" v-bind="formAttrs" :data="item" @change="formChange"></cfg-form>
        <cfg-form :ref="'formValues'" v-bind="valuesAttrs" :data="item.values"></cfg-form>
    </Col>
</Row>
</template>

<script>
export default {
  name:'',
  components: {},
  data() {
    return {
        item:null
    };
  },
  props: {
    current:{
        default:()=>{
            return {
            }
        }
    }
  },
  watch: {},
  computed: {
    treeAttrs(){
        return {
            title:{
                "en-US":'Filter List',
                "zh-CN": 'Filter List'
            }[this.G_Locale],
            rootId:null,
            nameId:'id',
            namePid:'parentId',
            nameTitle:'id',
            rootEnable:true,
            menuEnable:true,
            addEnable:true,
            removeEnable:true,
            menus:[]
        }
    },
    formAttrs(){
        return {
            labelWidth: 100,
            labelPosition: 'right',
            cols: 2,
            columns: [
                {
                    key: 'id',
                    title: 'id',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text'
                    }
                },
                {
                    key: 'type',
                    title: '类型',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'display',
                    },
                }
            ],
            rules:{
                type: [
                    { required: true, message: '请输入所属类型', trigger: 'blur' }
                ],
                className: [
                    { required: true, message: '请输入模型类名', trigger: 'blur' }
                ]
            },
            onlyRead:false

        }
    },
    valuesAttrs(){
        return {
            labelWidth: 100,
            labelPosition: 'right',
            cols: 2,
            columns: [
                {
                    key: 'color',
                    title: '颜色',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'color',
                    },
                },
                {
                    key: 'fill',
                    title: '填充颜色',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'color',
                    },
                },
                {
                    key: 'x',
                    title: 'x',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'number'
                    }
                },
                {
                    key: 'y',
                    title: 'y',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'number',
                    },
                },
                {
                    key: 'lx',
                    title: 'lx',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'number',
                    },
                },
                {
                    key: 'ly',
                    title: 'ly',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'number',
                    },
                },
                {
                    key: 'lz',
                    title: 'lz',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'number',
                    },
                },
                {
                    key: 'scale',
                    title: '比例',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'number',
                    },
                },
                {
                    key: 'constant',
                    title: '强度',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'number',
                    },
                }
            ],
            rules:{
                type: [
                    { required: true, message: '请输入所属类型', trigger: 'blur' }
                ],
                className: [
                    { required: true, message: '请输入模型类名', trigger: 'blur' }
                ]
            },
            onlyRead:false

        }
    },

  },
  created() {},
  mounted() {},
  methods: {
    select(item){
        this.item = item;
    },
    add(item){
        this.current.filters.push(this.pointTpl())
    },
    remove(item){
        this.current.filters.splice(this.current.filters.indexOf(item),1)
        this.item = null;
    },
    menu(menu,item){
        
    },
    formChange(key,value){
        
    },
    setTree(fn){
      this.$refs.tree.$children[0].setTree(fn)
    },
    pointTpl(){
        return {
            id:'point1',
            type:'point',
            values:{
                x:0,
                y:0,
                lx:50,
                ly:50,
                lz:30,
                color:'white',
                fill:'green',
                scale:2,
                constant:0.8
            }
        }
    },
  }
};
</script>
<style scoped>
</style>